<template>
  <view class="factory-container home-container">
    <!-- 数据看板 -->
    <view class="data-bord default-box">
      <h2 style="text-align: center">数据看板</h2>
      <view class="data-headers">
        <view class="data-title">数据筛选项</view>
        <view @click="closeOutside" class="drop-out">
          <wd-drop-menu class="drop-menu">
            <wd-drop-menu-item
              class="drop-item"
              v-model="value1"
              :options="option1"
              @change="handleChange1"
            />
          </wd-drop-menu>
        </view>
      </view>
      <view class="data-body">
        <wd-row>
          <wd-col :span="24">
            <view class="grid-data">
              <view class="number">1000</view>
              <view>合作种植户数量</view>
            </view>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="12">
            <view class="grid-data">
              <view class="number">1000</view>
              <view>茶籽净重 kg</view>
            </view>
          </wd-col>
          <wd-col :span="12">
            <view class="grid-data">
              <view class="number">1000</view>
              <view>换油 kg</view>
            </view>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="12">
            <view class="grid-data">
              <view class="number">1000</view>
              <view>茶饼 kg</view>
            </view>
          </wd-col>
          <wd-col :span="12">
            <view class="grid-data">
              <view class="number">1000</view>
              <view>提油 kg</view>
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <!-- 待处理订单 -->
    <wd-collapse class="default-box" v-model="value">
      <wd-collapse-item title="待处理订单" name="item1">
        这里就是以后用来放待处理订单的地方
        <wd-card title="经营分析">
          一般的，检举内容由承办的党的委员会或
          纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
          <template #footer>
            <wd-button size="small" plain>查看详情</wd-button>
          </template>
        </wd-card>
        <wd-card title="经营分析">
          一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
          <template #footer>
            <wd-button size="small" plain>查看详情</wd-button>
          </template>
        </wd-card>
        <wd-card title="经营分析">
          一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。
          <template #footer>
            <wd-button size="small" plain>查看详情</wd-button>
          </template>
        </wd-card>
      </wd-collapse-item>
    </wd-collapse>
  </view>
</template>

<script lang="ts" setup>
import { useQueue } from 'wot-design-uni'

const { closeOutside } = useQueue()

const value = ref<string[]>([])
const value1 = ref<number>(0)

const option1 = ref<Record<string, any>[]>([
  { label: '今天', value: 0 },
  { label: '前三天', value: 1 },
  { label: '前一周', value: 2 },
  { label: '所有', value: 4 },
])

function handleChange1({ value }) {
  console.log(value)
}
</script>

<style lang="scss">
@import '@/style/custom/home.scss';

.factory-container {
  :deep(.grid-data .number) {
    font-size: 50upx;
    color: #11a94b;
  }

  :deep(.wd-col-24 .number) {
    font-size: 48upx;
    color: #ff6600;
  }
}
</style>
